<template>
  <view class="container">
    <image class="imgBg" src="/static/images/mine_bg.png" mode=""></image>
    <uv-navbar title="个人中心" placeholder leftIconSize="0" bgColor="rgba(0,0,0,0)"
      :titleStyle="{'color':'#fff'}"></uv-navbar>
    <view class="block">
      <view class="userInfo" @click="toPage">
        <image class="touxiang" :src="userInfo.avatar" mode=""></image>
        <view class="linner">
          <view class="name">
            {{userInfo.real_name}}
          </view>
          <view class="selfId">
            专属ID：{{userInfo.uid}}
          </view>
        </view>
        <image class="ballet_icon" src="/static/images/ballet_icon.png" mode=""></image>
      </view>
      <view class="wallet">
        <view class="wallet-item" @click="toWallet">
          <view class="label">
            钱包
          </view>
          <view class="value">
            {{userInfo.now_money}}
          </view>
        </view>
        <view class="wallet-item" @click="toWallet2">
          <view class="label">
            权益卡
          </view>
          <view class="value">
            {{cardInfo.gift_card_money}}
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="setting" style="margin-bottom: 30rpx;">
        <view class="setting-title">
          <text class="txt1">
            我的订单
          </text>
          <view style="display: flex;align-items: center;" @click="toOrderList">
            <text class="txt2">
              全部订单
            </text>
            <image style="width: 40rpx;height: 40rpx;" src="/static/images/arrow.png" mode=""></image>
          </view>
        </view>
        <view class="setting-menu">
          <view class="setting-menu-item" v-for="(item, index) in orderList" :key="index"
            @click="toOrderJumpPage(item)">
            <uv-badge class="badge" v-if="item.count>0" type="error" max="99" :value="item.count"></uv-badge>
            <image class="order-icon" :src="item.url" mode=""></image>
            <view class="status-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
      <view class="setting">
        <view class="setting-title">
          我的订单
        </view>
        <view class="setting-menu">
          <view class="setting-menu-item" @click="toPayPage(item)" style="width: 25%;"
            v-for="(item, index) in serverList" :key="index">
            <image class="order-icon" style="width: 80rpx;height: 80rpx;" :src="item.url" mode=""></image>
            <view class="status-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="logout" @click="logout">
      退出登录
    </view>
    <uv-modal ref="modal" title="是否退出登录?" :showCancelButton="true" @confirm="confirm"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        orderList: [{
            url: "/static/images/ding1.png",
            label: "待付款",
            index: 1
          },
          {
            url: "/static/images/ding2.png",
            label: "待发货",
            index: 2
          },
          {
            url: "/static/images/ding3.png",
            label: "待收货",
            index: 3
          },
          {
            url: "/static/images/ding4.png",
            label: "已完成",
            index: 4
          },
          {
            url: "/static/images/ding5.png",
            label: "售后订单"
          }
        ],
        serverList: [{
            url: "/static/images/fuwu1.png",
            label: "收货地址"
          },
          {
            url: "/static/images/fuwu2.png",
            label: "意见反馈"
          },
          {
            url: "/static/images/fuwu3.png",
            label: "关于我们"
          },
          {
            url: "/static/images/fuwu4.png",
            label: "在线客服"
          }
        ],
        userInfo: {},
        orderStatusNum: {},
        cardInfo: {}
      }
    },
    onShow() {
      this.getUserInfo();
      this.getPerInfo();
    },
    methods: {
      logout() {
        this.$refs.modal.open();
      },
      confirm() {
        uni.showToast({
          title: "退出成功",
          icon: 'none',
          mask: true,
          duration: 1500,
        })
        setTimeout(() => {
          uni.removeStorageSync("token");
          uni.removeStorageSync("userInfo");
          uni.reLaunch({
            url: "/pages/home/login"
          })
          this.$refs.modal.close();
        }, 1500)
      },
      getUserInfo() {
        reqApi.userInfo({}).then(res => {
          console.log("用户信息", res.data);
          uni.setStorageSync("userInfo", res.data);
          this.userInfo = res.data;
        })
      },
      getPerInfo() {
        reqApi.personInfo({}).then(res => {
          console.log("个人中心", res);
          this.orderStatusNum = res.data.orderStatusNum;
          uni.setStorageSync("cardInfo", res.data);
          this.cardInfo = res.data;
          this.orderList[0].count = res.data.orderStatusNum.unpaid_count;
          this.orderList[1].count = res.data.orderStatusNum.unshipped_count;
          this.orderList[2].count = res.data.orderStatusNum.received_count;
          this.orderList[4].count = res.data.orderStatusNum.refund_count;
        })
      },
      toPage() {
        uni.navigateTo({
          url: "/pages/mine/userInfo"
        })
      },
      toOrderList() {
        uni.navigateTo({
          url: "/pages/mine/orderList"
        })
      },
      toOrderJumpPage(item) {
        if (item.label == "售后订单") {
          uni.navigateTo({
            url: `/pages/mine/afterSales`
          })
        } else {
          uni.navigateTo({
            url: `/pages/mine/orderList?index=${item.index}`
          })
        }

      },
      toPayPage(item) {
        switch (item.label) {
          case "意见反馈":
            uni.navigateTo({
              url: "/pages/mine/feedback"
            })
            break;
          case "收货地址":
            uni.navigateTo({
              url: "/pages/mine/addressList?isPage=" + 'mine'
            })
            break;
          case "在线客服":
            uni.makePhoneCall({
              phoneNumber: "400-0979991",
              success: function() {
                console.log('拨打电话成功');
              },
              fail: function() {
                console.log('拨打电话失败');
              }
            });
            break;
          default:
            uni.navigateTo({
              url: `/pages/mine/aboutUs?type=7`
            })
            break;
        }
        uni.navigateTo({
          url: "/pages/mine/webview"
        })
      },
      toWallet() {
        uni.navigateTo({
          url: "/pages/mine/myWallet"
        })
      },
      toWallet2() {
        uni.navigateTo({
          url: "/pages/mine/myWallet2"
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .logout {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    position: fixed;
    bottom: 150rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .container {
    position: relative;

    .imgBg {
      width: 100vw;
      height: 500rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .main {
      position: relative;
      z-index: 20;
      padding: 40rpx 30rpx;
      box-sizing: border-box;

      .setting {
        padding: 30rpx 0;
        box-sizing: border-box;
        background: #fff;
        border-radius: 16rpx;

        .setting-title {
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
          padding: 0 30rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;

          .txt2 {
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
          }
        }

        .setting-menu {
          display: flex;
          margin-top: 30rpx;

          .setting-menu-item {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .order-icon {
              width: 48rpx;
              height: 48rpx;
            }

            .status-label {
              font-weight: 400;
              font-size: 28rpx;
              color: #000000;
              margin-top: 6rpx;
            }
          }
        }
      }
    }

    .block {
      padding: 30rpx 30rpx 50rpx 30rpx;
      box-sizing: border-box;
      position: relative;
      z-index: 20;

      .userInfo {
        display: flex;
        align-items: center;

        .touxiang {
          width: 112rpx;
          height: 112rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }

        .linner {
          flex: 1;
          display: flex;
          justify-content: space-around;
          flex-direction: column;

          .name {
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
          }

          .selfId {
            font-weight: 400;
            font-size: 28rpx;
            color: #FFFFFF;
            margin-top: 15rpx;
            opacity: .9;
          }
        }

        .ballet_icon {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .wallet {
        display: flex;
        justify-content: space-between;
        margin-top: 55rpx;

        .wallet-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          .label {
            font-weight: 600;
            font-size: 24rpx;
            color: #FFFFFF;
          }

          .value {
            font-weight: 600;
            font-size: 40rpx;
            color: #FFFFFF;
            margin-top: 8rpx;
          }
        }
      }
    }

  }
</style>